@import "../global.less";
@import "../icon.less";
@import "../animate.less";

body {

  // width: 5280px;
  // height: 2430px;
  // width: 100%;
  // height: 100%;
  //background: url(../../../images/bg.jpg) no-repeat left top;
  background-color: #424242;
}

.dashboard-top {
  position: fixed;
  width: 528px;
  height: auto;
  z-index: 3;
  top: 35px;
  left: 55px;

  .log {
    width: 528px;
    height: 181px;
    background: url(../../../images/c-top/logo.png) no-repeat left top;
  }

  &>.extra {
    width: 528px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    height: 60px;
    width: 100%;

    .item {
      border-right: 5px rgba(255, 255, 255, 0.7) solid;
      height: 36px;
      padding: 0 12px;
      text-align: center;
      flex-grow: 1;
      flex-shrink: 1;

      .text {
        font-family: 'borda';
        font-size: 36px;
        color: #FFF;
        line-height: 36px;
        display: flex;
        // margin-left: 12px;
      }

      .icon {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 6px 0 0;
        background-size: contain;
        transition: .4s;

        &.icon-weather-sunny {
          .bg-icon-weather-sunny-actived();
        }

        &.bg-icon-arrow-down {
          .bg-icon-arrow-down();
        }

        &.bg-icon-arrow-up {
          .bg-icon-arrow-up();
        }
      }
    }
  }

  &>.envpicker {
    position: fixed;
    top: 274px;
    left: 218px;
    width: 725px;
    height: 1325px;
    background: url(../../../images/c-envpicker/bg-envpicker.png) no-repeat top left;
    transition: all 0.5s;

    .envpicker-wrapper {
      backdrop-filter: blur(10px);
      margin-top: 41px;
      width: 100%;
      height: 1290px;

      //background: linear-gradient(170deg, rgba(0, 35, 36, 0) 0%, #000F10 100%);
      // opacity: 0.3;
      .envpicker-header {
        height: 110px;
        padding: 24px 46px 25px 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          width: 160px;
          display: flex;
          height: 60px;
          justify-content: space-between;
          font-size: 42px;
          font-family: YouSheBiaoTiHei;
          color: #FFFFFF;
          line-height: 60px;
          font-family: 'ys';

          .icon {
            display: inline-block;
            width: 60px;
            height: 60px;

            &.icon-time {
              .bg-icon-time();
            }

            &.icon-season {
              .bg-icon-season();
            }

            &.icon-calendar {
              .bg-icon-calendar();
            }

            &.icon-weather {
              .bg-icon-weather();
            }
          }
        }

        .extra {
          line-height: 60px;
          font-size: 28px;
          font-family: Alibaba-PuHuiTi-M, Alibaba-PuHuiTi;
          font-weight: normal;
          color: #FFFFFF;
          line-height: 60px;

          &>.text {
            margin-right: 14px;
          }

          &>.switch {
            width: 86px;
          }
        }
      }

      .envpicker-body {

        // height: 60px;
        //border: 1px solid red;
        .slider {
          width: 610px;
          height: 18px;
          position: relative;
          margin: 0 auto;

          /deep/ .el-slider__bar {
            background: linear-gradient(270deg, #83BF39 0%, #1DC760 100%);
          }
        }

        &>ul {
          list-style: none;
          display: flex;
          justify-content: space-between;
          margin: 30px 50px;

          //border: 1px solid red;
          li {
            // width: 60px;
            height: 20px;
            font-size: 32px;
            font-family: Alibaba-PuHuiTi-M, Alibaba-PuHuiTi;
            font-weight: normal;
            color: #FFFCFF;
            line-height: 44px;
          }
        }

        &:after {
          content: '';
          top: 100px;
          width: 100%;
          margin-top: 50px;
          display: block;
          height: 2px;
          background: -webkit-linear-gradient(left, #FFFFFF00, #FFFFFFFF, #FFFFFF00);
        }
      }

      .envpicker-footer {
        height: 500px;

        // border: 1px solid red;
        &>ul {
          list-style: none;
          height: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          margin: 0 50px;

          li {
            // display: inline-block;
            display: flex;
            flex-direction: column;
            width: 140px;
            height: 140px;

            &>span {
              width: 140px;
              margin-top: 12px;
              height: 48px;
              text-align: center;
              font-size: 32px;
              font-family: Alibaba-PuHuiTi-M, Alibaba-PuHuiTi;
              font-weight: normal;
              color: #FFFCFF;
              line-height: 44px;
            }

            .icon {
              display: inline-block;
              width: 140px;
              height: 60px;

              &.icon-weather-sunny {
                .bg-icon-weather-sunny-actived();
              }

              &.icon-weather-darken {
                .bg-icon-weather-darken-actived();
              }

              &.icon-weather-cloudy {
                .bg-icon-weather-cloudy-actived();
              }

              &.icon-weather-fog {
                .bg-icon-weather-fog-actived();
              }

              &.icon-weather-little-rainy {
                .bg-icon-weather-little-rainy-actived();
              }

              &.icon-weather-medium-rainy {
                .bg-icon-weather-medium-rainy-actived();
              }

              &.icon-weather-heavy-rainy {
                .bg-icon-weather-heavy-rainy-actived();
              }

              &.icon-weather-haze {
                .bg-icon-weather-haze-actived();
              }

              &.icon-weather-little-snowy {
                .bg-icon-weather-little-snowy-actived();
              }

              &.icon-weather-medium-snowy {
                .bg-icon-weather-medium-snowy-actived();
              }

              &.icon-weather-heavy-snowy {
                .bg-icon-weather-heavy-snowy-actived();
              }

              &.icon-weather-blizzard {
                .bg-icon-weather-blizzard-actived();
              }

              &.icon-arrow-up {
                .bg-icon-arrow-up();
                cursor: pointer;
              }

              &.icon-arrow-down {
                cursor: pointer;
                .bg-icon-arrow-down();
              }
            }
          }
        }
      }
    }
  }
}

.dashboard-right {
  position: fixed;
  width: 960px;
  height: 3700px;
  top: 0;
  right: 86px;
  padding: 50px 0;
  // perspective: 2000px;
  // transform-origin: top right;
  // transform: rotate(-0.5deg);

  .top {
    width: 100%;
    height: 360px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border: 1px solid red;

    .image {
      height: 72px;
      width: 100%;
      background-color: #1DC760;
      background: url('../../../images/c-box/bg-box-header.png') no-repeat top left;

      span {
        display: block;
        margin-left: 47px;
        width: 240px;
        height: 72px;
        font-size: 54px;
        font-family: YouSheBiaoTiHei;
        color: #FFFFFF;
        line-height: 70px;
        letter-spacing: 5px;
      }
    }

    .content {
      height: 300px;
      width: 100%;
      border: 1px solid red;
      display: flex;

      .start {
        background-color: #83BF39;
        width: 300px;
        height: 100%;
        border: 1px solid red;
      }

      .end {
        flex: 1;
        height: 100%;
        border: 1px soild red;
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;

        .item {
          position: relative;
          display: flex;
          border: 1px solid red;
          width: 124px;
          height: 100px;


          .item-num {
            width: 28px;
            height: 38px;
            font-size: 28px;
            font-family: Alibaba-PuHuiTi-M, Alibaba-PuHuiTi;
            font-weight: normal;
            color: #FFFFFF;
            line-height: 38px;
          }

          .item-fen {
            width: 57px;
            height: 70px;
            font-size: 58px;
            font-family: Borda-Medium, Borda;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 70px;
            letter-spacing: 1px;
          }

          .item-title {
            width: 111px;
            height: 38px;
            font-size: 28px;
            font-family: Alibaba-PuHuiTi-M, Alibaba-PuHuiTi;
            font-weight: normal;
            color: #FFFFFF;
            line-height: 38px;
          }
        }
      }
    }
  }
}

.dashboard-left {}

.dashboard-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 712+400px;
  height: 1060px;
  z-index: 3;
  //background: #797979;

  .dashboard-circular {
    width: 680px;
    height: 680px;
    position: absolute;
    margin-top: 20%;
    top: 0;
    left: 0;
    //border: 1px solid red;
  }

  .dashboard-circular:nth-child(1) {
    background: url(../../../images/c-sphere/sphere-layer-1.png) no-repeat center center;
    animation: 25s rollingClockwise infinite;
  }

  .dashboard-circular:nth-child(2) {
    background: url(../../../images/c-sphere/sphere-layer-2.png)no-repeat center center;
    animation: 50s rollingClockwise reverse infinite;
  }

  .dashboard-circular:nth-child(3) {
    background: url(../../../images/c-sphere/sphere-layer-3.png)no-repeat center center;
    animation: 15s rollingClockwise infinite;
  }

  .dashboard-meau {

    //border: 1px solid red;
    .dashboard-meau-radio {
      position: absolute;
      display: flex;
      width: 468px;
      height: 154px;
      //border: 1px solid red;
      cursor: pointer;

      .icon {
        width: 124px;
        height: 124px;
        transition: .3s;
        cursor: pointer;
        //padding: 12px;
        background-color: royalblue;
        //border: 1px solid rebeccapurple;
      }

      .icon-overall {
        .bg-icon-menu-overall-normal();
      }

      .icon-ecology {
        .bg-icon-menu-ecology-normal();
      }


      .icon-construction {
        .bg-icon-menu-construction-normal();
      }


      .icon-landscape {
        .bg-icon-menu-landscape-normal();
      }

      .icon-management {
        .bg-icon-menu-management-normal();
      }

      .icon-overall-checked {
        width: 158px;
        height: 158px;
        border-radius: 50%;
        backdrop-filter: blur(50px);
        border: 2px #fff solid;
        padding: 14px;
        background-color: #1DC760;
        .bg-icon-menu-overall-actived();
      }

      .icon-ecology-checked {
        width: 158px;
        height: 158px;
        border-radius: 50%;
        backdrop-filter: blur(50px);
        border: 2px #fff solid;
        padding: 14px;
        background-color: #1DC760;
        .bg-icon-menu-ecology-actived();
      }

      .icon-construction-checked {
        width: 158px;
        height: 158px;
        border-radius: 50%;
        backdrop-filter: blur(50px);
        border: 2px #fff solid;
        padding: 14px;
        background-color: #1DC760;
        .bg-icon-menu-construction-actived();
      }

      .icon-landscape-checked {
        width: 158px;
        height: 158px;
        border-radius: 50%;
        backdrop-filter: blur(50px);
        border: 2px #fff solid;
        padding: 14px;
        background-color: #1DC760;
        .bg-icon-menu-landscape-actived();
      }

      .icon-management-checked {
        width: 158px;
        height: 158px;
        border-radius: 50%;
        backdrop-filter: blur(50px);
        border: 2px #fff solid;
        padding: 14px;
        background-color: #1DC760;
        .bg-icon-menu-management-actived();
      }

      .content {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        margin-left: -25px;
        background: url(../../../images/c-sphere/menu-actived-text-bg.png) no-repeat center left;
        width: 332px;
        height: 154px;
        line-height: 154px;
        transition: .5s all;
        //border: 1px solid red;

        .title {
          margin-left: 40px;
          width: 230px;
          height: 54px;
          line-height: 54px;
          font-size: 56px;
          font-family: YouSheBiaoTiHei;
          color: #FFFFFF;
        }

        .subtitle {
          margin-left: 40px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          font-size: 28px;
          font-family: Alibaba-PuHuiTi-M, Alibaba-PuHuiTi;
          font-weight: normal;
          color: #FFFFFF;
        }
      }
    }

    .dashboard-meau-radio:nth-child(1) {
      left: 486+100px;
      bottom: 843px;
      //background-color: red;
    }

    .dashboard-meau-radio:nth-child(2) {
      left: 597px+100;
      bottom: 674px;
      //background-color: red;
    }

    .dashboard-meau-radio:nth-child(3) {
      left: 636px+100;
      bottom: 471px;
      //background-color: red;
    }

    .dashboard-meau-radio:nth-child(4) {
      left: 597px+100;
      bottom: 277px;
      //background-color: red;
    }

    .dashboard-meau-radio:nth-child(5) {
      left: 487px+100;
      bottom: 85px;
      //background-color: red;
    }
  }

  .toolbar {
    width: 1200px;
    height: 1200px;
    position: fixed;
    bottom: 100px;
    left: 1000px;
    z-index: 3;
    display: flex;
    flex-flow: nowrap row;
    justify-content: space-evenly;
    align-items: flex-end;

    .icon {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }

    .icon-sphere {
      .bg-icon-open-sphere-normal();
    }

    .icon-home {
      .bg-icon-home-normal();
    }

    .icon-setting {
      .bg-icon-setting-normal();
    }
  }
}

.flex {
  width: 100%;
  height: auto;
  position: fixed;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  border: 1px solid red;
}